
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input
          type="text"
          disabled
          :value="current.component + '-' + current.key"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段标识</div>
      <div class="w-3/4">
        <a-input
          type="text"
          placeholder="用于$('')查询"
          v-model:value.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">字段名称</div>
      <div class="w-3/4">
        <a-input type="text" allowClear v-model:value="current.componentProps.label" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">绑定字段</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          allowClear
          v-model:value="current.field"
          class="m-2"
          @change="modelChange"
          placeholder="Select"
        >
        <a-select-option
        v-for="item in modelOptions"
            :key="item.fieldCnName"

            :value="item.value"
          >{{ item.label }}</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">默认值</div>
      <div class="w-3/4">
        <a-input type="text" allowClear v-model.trim="current.componentProps.value" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">是否必填</div>
      <div class="w-3/4">
        <a-checkbox
          v-model:checked="current.required"
          @change="requiredChange"
          size="large"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14 font-bold">事件配置</div>
    </div>
    <div class="flex items-center px-10">
      <div class="w-1/4 text-14">onChange</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          mode="multiple"
          allowClear
          v-model:value="current.componentProps.onChangeEvents"
          class="m-2"
          placeholder="Select"
        >
          <a-select-option
            v-for="item in lowCode.eventCollection"
            :key="item.code"
            :value="item.code"
          >
          {{ item.describe }}
          </a-select-option>
        </a-select>
      </div>
    </div>
    <div class="flex items-center px-10">
      <div class="w-1/4 text-14">onFocus</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          mode="multiple"
          allowClear
          v-model:value="current.componentProps.onFocusEvents"
          class="m-2"
          placeholder="Select"
        >
          <a-select-option
            v-for="item in lowCode.eventCollection"
            :key="item.code"
            :value="item.code"
          >
          {{ item.describe }}
        </a-select-option>
        </a-select>
      </div>
    </div>
    <!-- <div class="flex items-center p-10" v-if="current.componentProps.eventCode">
      <div class="w-1/4 text-14">触发方式</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          allowClear
          v-model="current.componentProps.eventTriggerType"
          class="m-2"
          placeholder="Select"
        >
          <a-option label="change" value="change" />
          <a-option label="watch" value="watch" />
        </a-select>
      </div>
    </div> -->
  </div>
</template>
 
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watch } from "vue";
import type { Component, LowCodeImp } from "@/components/low-code/core/";

export default defineComponent({
  name: "inputWidget",
  props: ["current"],
  setup(props) {
    const { current: component } = toRefs(reactive(props));
    let lowCode = component.value.getLowCodeInstance() as LowCodeImp;

    const modelOptions = computed(() => {
      return lowCode.modelController.modelTree;
    });

    const modelChange = (value: string) => {
      console.log("model已刷新", component.value.field);
      component.value.modelBing();
      (component.value as any).componentProps.label = lowCode.modelController.fieldPoolMap[value]?.fieldDisplay ?? 'label';
      if (component.value.key) {
        lowCode.dataCenter[component.value.key].updateMetaRefresh();
      } else {
        lowCode.updateMetaRefresh();
      }
    };

    const requiredChange = (flag:{target:{checked:boolean}} ) => {
      let index = (<{ rules: any[] }>component.value.componentProps).rules.findIndex(
        (rule) => {
          return rule.required == true;
        }
      );
      if (index == -1 && flag.target.checked == true) {
        (<{ rules: any[] }>component.value.componentProps).rules.push({
          required: true,
          message: "请输入内容",
          trigger: "blur",
        });
      } else {
        (<{ rules: any[] }>component.value.componentProps).rules.splice(index, 1);
      }
      component.value.updateMetaRefresh();
    };

    return { lowCode, modelOptions, modelChange, requiredChange };
  },
});
</script>

<style  scoped>
</style>
